import { useState, useEffect, useMemo } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import { createForm, onFieldReact, isField } from '@formily/core';
import { createSchemaField } from '@formily/react';
import {
  Form,
  FormItem,
  Input,
  ArrayTable,
  Switch,
  Space,
  Select,
  Checkbox,
  NumberPicker,
  FormGrid,
} from '@formily/antd';
import { Card, Spin, Button, message } from 'antd';
import * as enums from './enums';
import { request, useLocation, history, useModel } from 'umi';
import { schemaExample } from './initiaValues';

const SchemaField = createSchemaField({
  components: {
    Input,
    FormItem,
    ArrayTable,
    Switch,
    Select,
    FormGrid,
    Checkbox,
    NumberPicker,
    Button,
  },
});

const Index = () => {
  const [spinLoading, setSpinLoading] = useState(true);
  const [submitLoading, setSubmitLoading] = useState(false);
  const location = useLocation();
  const { initialState, setInitialState, refresh } = useModel('@@initialState');

  const form = useMemo(
    //这个createForm本来应该是写在组件上面的。如果想移动到组件内部，貌似用这个useMemo来搞，很神奇的写法
    () =>
      createForm({
        effects: () => {
          onFieldReact('fields.*.data', (field) => {
            if (isField(field)) {
              //.type 对应 SchemaField.String 的name属性
              const typeValue = field.query('.type').get('value'); //这里query那个('.type')直接就是取本行的type，很神奇的写法
              const attrValue =
                typeValue === 'switch' ||
                typeValue === 'radio' ||
                typeValue === 'select' ||
                typeValue === 'tree' ||
                typeValue === 'selects' ||
                typeValue === 'parent';
              if (!attrValue) {
                field.value = 'N/A';
              }
              field.editable = attrValue;
              field.required = attrValue; //是否必填，submit验证
            }
          });
        },
      }),
    [],
  );

  useEffect(() => {
    let stopMark = false;
    if (location.pathname) {
      console.log('pathname', location.pathname);
      const getData = async () => {
        try {
          let res: any;
          res = await request(
            `${location.pathname.replace(
              '/basic-list/api/models/model-design',
              '/api/models/model-design',
            )}`,
          );
          console.log('res', res);

          if (stopMark !== true) {
            setSpinLoading(false);
            form.setState((state) => {
              const { id, routeName, ...rest } = res.data;
              if (Object.keys(rest).length === 0) {
                state.initialValues = schemaExample;
              }
              state.initialValues = res.data;
            });
          }
        } catch (error) {
          history.goBack();
        }
      };
      getData();
    }
    return () => {
      stopMark = true;
    };
  }, [location.pathname]);

  const reFetchMenu = async () => {
    setInitialState({
      ...initialState,
      settings: {
        menu: {
          loading: true,
        },
      },
    });

    refresh();

    const userMenu = await initialState?.fetchUserMenu?.();
    if (userMenu) {
      setInitialState({
        ...initialState,
        currentMenu: userMenu,
      });
    }
  };

  const pageSubmitHandler = (values: any) => {
    console.log('value', values);

    setSubmitLoading(true);
    message.loading({ content: 'Processing...', key: 'process', duration: 0 });
    const updateData = async () => {
      try {
        const res = await request('/api/models/model-design', {
          method: 'post',
          data: values,
        });
        if (res.succeeded === true) {
          message.success({ content: '提交成功！', key: 'process' });
          history.goBack();
          reFetchMenu();
        }
        setSubmitLoading(false);
      } catch (error) {
        setSubmitLoading(false);
      }
    };

    updateData();
  };

  return (
    <PageContainer>
      {spinLoading ? (
        <Spin tip="Loading..." />
      ) : (
        <Form form={form}>
          <Space direction="vertical" style={{ width: '100%' }}>
            <Card title="Basic" size="small">
              <SchemaField>
                <SchemaField.String
                  name="routeName"
                  title="Route Name(注意：和下面api保持一致)"
                  x-component="Input"
                  required={true}
                  x-decorator="FormItem"
                />
              </SchemaField>

              <FormGrid>
                <FormGrid.GridColumn>
                  <SchemaField>
                    <SchemaField.String
                      name="menuName"
                      title="菜单名称(自动生成对应菜单及其子菜单)"
                      x-component="Input"
                      required={true}
                      x-decorator="FormItem"
                    />
                  </SchemaField>
                </FormGrid.GridColumn>
                <FormGrid.GridColumn>
                  <SchemaField>
                    <SchemaField.String
                      name="formColumns"
                      title="页表表单显示列数"
                      required={true}
                      x-validator={[{ max: 4, min: 1, required: true }]}
                      x-component="NumberPicker"
                      x-decorator="FormItem"
                    />
                  </SchemaField>
                </FormGrid.GridColumn>
              </FormGrid>

              <SchemaField>
                <SchemaField.String
                  name="id"
                  title="ID"
                  x-component="Input"
                  x-decorator="FormItem"
                  x-display="none"
                />
              </SchemaField>
            </Card>
            <Card title="Fields" size="small">
              <SchemaField>
                <SchemaField.Array x-component="ArrayTable" name="fields" x-decorator="FormItem">
                  <SchemaField.Object>
                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Sort', width: 60, align: 'center' }}
                    >
                      <SchemaField.Void
                        x-component="ArrayTable.SortHandle"
                        x-decorator="FormItem"
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Name' }}
                    >
                      <SchemaField.String name="name" x-component="Input" x-decorator="FormItem" />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Title' }}
                    >
                      <SchemaField.String name="title" x-component="Input" x-decorator="FormItem" />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Type' }}
                    >
                      <SchemaField.String
                        name="type"
                        x-component="Select"
                        x-decorator="FormItem"
                        enum={enums.fieldType}
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Data', width: 200, align: 'center' }}
                    >
                      <SchemaField.String name="data" x-component="Input" x-decorator="FormItem" />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{
                        title: '列表排序',
                        width: 40,
                        align: 'center',
                      }}
                    >
                      <SchemaField.Boolean
                        name="listSorter"
                        x-component="Checkbox"
                        x-decorator="FormItem"
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{
                        title: '列表不见',
                        dataIndex: 'hideInColumn',
                        width: 40,
                        align: 'center',
                      }}
                    >
                      <SchemaField.Boolean
                        name="hideInColumn"
                        x-component="Checkbox"
                        x-decorator="FormItem"
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{
                        title: '表单不见',
                        dataIndex: 'hideInForm',
                        width: 40,
                        align: 'center',
                      }}
                    >
                      <SchemaField.Boolean
                        name="hideInForm"
                        x-component="Checkbox"
                        x-decorator="FormItem"
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{
                        title: '表单只读',
                        dataIndex: 'editDisabled',
                        width: 40,
                        align: 'center',
                      }}
                    >
                      <SchemaField.Boolean
                        name="editDisabled"
                        x-component="Checkbox"
                        x-decorator="FormItem"
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{
                        title: '表单必填',
                        dataIndex: 'requiredInForm',
                        width: 40,
                        align: 'center',
                      }}
                    >
                      <SchemaField.Boolean
                        name="requiredInForm"
                        x-component="Checkbox"
                        x-decorator="FormItem"
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Operations', width: 100, align: 'center' }}
                    >
                      <SchemaField.Void x-component="ArrayTable.Remove" />
                      <SchemaField.Void x-component="ArrayTable.MoveUp" />
                      <SchemaField.Void x-component="ArrayTable.MoveDown" />
                    </SchemaField.Void>
                  </SchemaField.Object>
                  <SchemaField.Void
                    x-component="ArrayTable.Addition"
                    x-component-props={{
                      title: 'Add',
                      defaultValue: {
                        name: '',
                        title: '',
                        type: 'text',
                        editDisabled: false,
                        listSorter: false,
                        hideInColumn: false,
                        hideInForm: false,
                        requiredInForm: false,
                      },
                    }}
                  />
                </SchemaField.Array>
              </SchemaField>
            </Card>

            <Card title="List Action" size="small">
              <SchemaField>
                <SchemaField.Array
                  x-component="ArrayTable"
                  name="listAction"
                  x-decorator="FormItem"
                >
                  <SchemaField.Object>
                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Sort', width: 60, align: 'center' }}
                    >
                      <SchemaField.Void
                        x-component="ArrayTable.SortHandle"
                        x-decorator="FormItem"
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Title' }}
                    >
                      <SchemaField.String name="title" x-component="Input" x-decorator="FormItem" />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Type' }}
                    >
                      <SchemaField.String
                        name="type"
                        x-component="Select"
                        x-decorator="FormItem"
                        enum={enums.buttonType}
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Action', width: 200 }}
                    >
                      <SchemaField.String
                        name="action"
                        x-component="Select"
                        x-decorator="FormItem"
                        enum={enums.buttonAction}
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Uri' }}
                    >
                      <SchemaField.String name="uri" x-component="Input" x-decorator="FormItem" />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Method' }}
                    >
                      <SchemaField.String
                        name="method"
                        x-component="Select"
                        x-decorator="FormItem"
                        enum={enums.httpMethod}
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Operations', width: 100, align: 'center' }}
                    >
                      <SchemaField.Void x-component="ArrayTable.Remove" />
                      <SchemaField.Void x-component="ArrayTable.MoveUp" />
                      <SchemaField.Void x-component="ArrayTable.MoveDown" />
                    </SchemaField.Void>
                  </SchemaField.Object>
                  <SchemaField.Void
                    x-component="ArrayTable.Addition"
                    x-component-props={{ title: 'Add' }}
                  />
                </SchemaField.Array>
              </SchemaField>
            </Card>

            <Card title="Add Action" size="small">
              <SchemaField>
                <SchemaField.Array x-component="ArrayTable" name="addAction" x-decorator="FormItem">
                  <SchemaField.Object>
                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Sort', width: 60, align: 'center' }}
                    >
                      <SchemaField.Void
                        x-component="ArrayTable.SortHandle"
                        x-decorator="FormItem"
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Title' }}
                    >
                      <SchemaField.String name="title" x-component="Input" x-decorator="FormItem" />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Type' }}
                    >
                      <SchemaField.String
                        name="type"
                        x-component="Select"
                        x-decorator="FormItem"
                        enum={enums.buttonType}
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Action', width: 200 }}
                    >
                      <SchemaField.String
                        name="action"
                        x-component="Select"
                        x-decorator="FormItem"
                        enum={enums.buttonAction}
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Uri' }}
                    >
                      <SchemaField.String name="uri" x-component="Input" x-decorator="FormItem" />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Method' }}
                    >
                      <SchemaField.String
                        name="method"
                        x-component="Select"
                        x-decorator="FormItem"
                        enum={enums.httpMethod}
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Operations', width: 100, align: 'center' }}
                    >
                      <SchemaField.Void x-component="ArrayTable.Remove" />
                      <SchemaField.Void x-component="ArrayTable.MoveUp" />
                      <SchemaField.Void x-component="ArrayTable.MoveDown" />
                    </SchemaField.Void>
                  </SchemaField.Object>
                  <SchemaField.Void
                    x-component="ArrayTable.Addition"
                    x-component-props={{ title: 'Add' }}
                  />
                </SchemaField.Array>
              </SchemaField>
            </Card>

            <Card title="Edit Action" size="small">
              <SchemaField>
                <SchemaField.Array
                  x-component="ArrayTable"
                  name="editAction"
                  x-decorator="FormItem"
                >
                  <SchemaField.Object>
                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Sort', width: 60, align: 'center' }}
                    >
                      <SchemaField.Void
                        x-component="ArrayTable.SortHandle"
                        x-decorator="FormItem"
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Title' }}
                    >
                      <SchemaField.String name="title" x-component="Input" x-decorator="FormItem" />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Type' }}
                    >
                      <SchemaField.String
                        name="type"
                        x-component="Select"
                        x-decorator="FormItem"
                        enum={enums.buttonType}
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Action', width: 200 }}
                    >
                      <SchemaField.String
                        name="action"
                        x-component="Select"
                        x-decorator="FormItem"
                        enum={enums.buttonAction}
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Uri' }}
                    >
                      <SchemaField.String name="uri" x-component="Input" x-decorator="FormItem" />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Method' }}
                    >
                      <SchemaField.String
                        name="method"
                        x-component="Select"
                        x-decorator="FormItem"
                        enum={enums.httpMethod}
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Operations', width: 100, align: 'center' }}
                    >
                      <SchemaField.Void x-component="ArrayTable.Remove" />
                      <SchemaField.Void x-component="ArrayTable.MoveUp" />
                      <SchemaField.Void x-component="ArrayTable.MoveDown" />
                    </SchemaField.Void>
                  </SchemaField.Object>
                  <SchemaField.Void
                    x-component="ArrayTable.Addition"
                    x-component-props={{ title: 'Add' }}
                  />
                </SchemaField.Array>
              </SchemaField>
            </Card>

            <Card title="Table Toolbar" size="small">
              <SchemaField>
                <SchemaField.Array
                  x-component="ArrayTable"
                  name="tableToolbar"
                  x-decorator="FormItem"
                >
                  <SchemaField.Object>
                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Sort', width: 60, align: 'center' }}
                    >
                      <SchemaField.Void
                        x-component="ArrayTable.SortHandle"
                        x-decorator="FormItem"
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Title' }}
                    >
                      <SchemaField.String name="title" x-component="Input" x-decorator="FormItem" />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Type' }}
                    >
                      <SchemaField.String
                        name="type"
                        x-component="Select"
                        x-decorator="FormItem"
                        enum={enums.buttonType}
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Action', width: 200 }}
                    >
                      <SchemaField.String
                        name="action"
                        x-component="Select"
                        x-decorator="FormItem"
                        enum={enums.buttonAction}
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Uri' }}
                    >
                      <SchemaField.String name="uri" x-component="Input" x-decorator="FormItem" />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Method' }}
                    >
                      <SchemaField.String
                        name="method"
                        x-component="Select"
                        x-decorator="FormItem"
                        enum={enums.httpMethod}
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Operations', width: 100, align: 'center' }}
                    >
                      <SchemaField.Void x-component="ArrayTable.Remove" />
                      <SchemaField.Void x-component="ArrayTable.MoveUp" />
                      <SchemaField.Void x-component="ArrayTable.MoveDown" />
                    </SchemaField.Void>
                  </SchemaField.Object>
                  <SchemaField.Void
                    x-component="ArrayTable.Addition"
                    x-component-props={{ title: 'Add' }}
                  />
                </SchemaField.Array>
              </SchemaField>
            </Card>

            <Card title="Batch Toolbar" size="small">
              <SchemaField>
                <SchemaField.Array
                  x-component="ArrayTable"
                  name="batchToolbar"
                  x-decorator="FormItem"
                >
                  <SchemaField.Object>
                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Sort', width: 60, align: 'center' }}
                    >
                      <SchemaField.Void
                        x-component="ArrayTable.SortHandle"
                        x-decorator="FormItem"
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Title' }}
                    >
                      <SchemaField.String name="title" x-component="Input" x-decorator="FormItem" />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Type' }}
                    >
                      <SchemaField.String
                        name="type"
                        x-component="Select"
                        x-decorator="FormItem"
                        enum={enums.buttonType}
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Action', width: 200 }}
                    >
                      <SchemaField.String
                        name="action"
                        x-component="Select"
                        x-decorator="FormItem"
                        enum={enums.buttonAction}
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Uri' }}
                    >
                      <SchemaField.String name="uri" x-component="Input" x-decorator="FormItem" />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Method' }}
                    >
                      <SchemaField.String
                        name="method"
                        x-component="Select"
                        x-decorator="FormItem"
                        enum={enums.httpMethod}
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Operations', width: 100, align: 'center' }}
                    >
                      <SchemaField.Void x-component="ArrayTable.Remove" />
                      <SchemaField.Void x-component="ArrayTable.MoveUp" />
                      <SchemaField.Void x-component="ArrayTable.MoveDown" />
                    </SchemaField.Void>
                  </SchemaField.Object>
                  <SchemaField.Void
                    x-component="ArrayTable.Addition"
                    x-component-props={{ title: 'Add' }}
                  />
                </SchemaField.Array>
              </SchemaField>
            </Card>

            <Card title="Batch Toolbar - Trashed" size="small">
              <SchemaField>
                <SchemaField.Array
                  x-component="ArrayTable"
                  name="batchToolbarTrashed"
                  x-decorator="FormItem"
                >
                  <SchemaField.Object>
                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Sort', width: 60, align: 'center' }}
                    >
                      <SchemaField.Void
                        x-component="ArrayTable.SortHandle"
                        x-decorator="FormItem"
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Title' }}
                    >
                      <SchemaField.String name="title" x-component="Input" x-decorator="FormItem" />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Type' }}
                    >
                      <SchemaField.String
                        name="type"
                        x-component="Select"
                        x-decorator="FormItem"
                        enum={enums.buttonType}
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Action', width: 200 }}
                    >
                      <SchemaField.String
                        name="action"
                        x-component="Select"
                        x-decorator="FormItem"
                        enum={enums.buttonAction}
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Uri' }}
                    >
                      <SchemaField.String name="uri" x-component="Input" x-decorator="FormItem" />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Method' }}
                    >
                      <SchemaField.String
                        name="method"
                        x-component="Select"
                        x-decorator="FormItem"
                        enum={enums.httpMethod}
                      />
                    </SchemaField.Void>

                    <SchemaField.Void
                      x-component="ArrayTable.Column"
                      x-component-props={{ title: 'Operations', width: 100, align: 'center' }}
                    >
                      <SchemaField.Void x-component="ArrayTable.Remove" />
                      <SchemaField.Void x-component="ArrayTable.MoveUp" />
                      <SchemaField.Void x-component="ArrayTable.MoveDown" />
                    </SchemaField.Void>
                  </SchemaField.Object>
                  <SchemaField.Void
                    x-component="ArrayTable.Addition"
                    x-component-props={{ title: 'Add' }}
                  />
                </SchemaField.Array>
              </SchemaField>
            </Card>
          </Space>
        </Form>
      )}
      <FooterToolbar
        extra={
          <Space>
            <Button
              type="primary"
              onClick={() => {
                form.submit(pageSubmitHandler);
              }}
              loading={submitLoading}
            >
              保存
            </Button>
            <Button
              type="default"
              onClick={() => {
                history.goBack();
              }}
              loading={submitLoading}
            >
              取消
            </Button>
          </Space>
        }
      />
    </PageContainer>
  );
};

export default Index;
